import { ProTable, } from '@ant-design/pro-components';
import { Button } from 'antd';
import React, { useRef, useState, } from 'react';
import { request } from '../../utils/request.ts';
import RemoteSelect from '../../components/RemoteSelect/index.jsx';
import Detail from '../BatchCertification/detail.jsx';
import Edit from './edit.jsx';
const Coach = () => {
  const actionRef = useRef();
  const formRef = useRef();
  const columns = [
    {
      title: '批次号',
      dataIndex: 'code',
      search: false,
      ellipsis: true,
    },
    {
      title: '证书名称',
      dataIndex: 'cardName',
      search: false,
      ellipsis: true,
    },
    {
      title: '申请人数',
      dataIndex: 'number',
      search: false,
      ellipsis: true,
    },
    {
      title: '价格',
      dataIndex: 'price',
      search: false,
      ellipsis: true,
    },
    {
      title: '证书名称',
      dataIndex: 'cardId',
      hideInTable: true,
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        return (
          <RemoteSelect
            name="cardId"
            label="证书名称"
            fetchUrl="/api/card/pageList"
            fetchMethod="POST"
            fetchParams={{ type: '2' }}
            mapOption={item => ({ label: item.name, value: item.id })}
            placeholder="请选择证书名称"
            fieldProps={{
              allowClear: true,
            }}
          />
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      // hideInTable: true,
      fieldProps: {
        // @ts-ignore
        placeholder: '全部类型',
      },
      valueEnum: {
        0: { text: '审核中' },
        1: { text: '审核通过' },
        2: { text: '制作中' },
        3: { text: '发货中' },
        4: { text: '已完成' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a key="detail" onClick={
          () => {
            setRecord(record);
            setOpen(true);
          }}>查看详情</a>,
        <a key="detail" onClick={
          () => {
            setRecord(record);
            setEditOpen(true);
          }}>修改批次状态</a>,
      ],
    },
  ];
  const [open, setOpen] = useState(false);
  const [record, setRecord] = useState({});
  const [editOpen, setEditOpen] = useState(false);
  return (
    <>
      <div>
        <ProTable
          headerTitle='证书审核'
          actionRef={actionRef}
          formRef={formRef}
          form={{ span: 8 }}
          rowKey="id"
          search={{
            labelWidth: 80,
          }}
          toolBarRender={() => [
            <Button
              type="primary"
              key="add"
              onClick={() => { setRecord(null); setOpen(true) }}
            >
              新增
            </Button>,
          ]}
          request={async ({ current, status, cardId, ...other }) => {
            const data = {
              ...other,
              pageNum: current,
              status: status || -1,
              cardId: cardId || -1,
            }
            let res = await request('/api/studentCard/pageList', {
              method: 'POST',
              data,
            });
            const { records, total } = res?.data || {};
            return {
              data: records || [],
              total: total || 0,
            };
          }}
          columns={columns}
        />
      </div>
      <Detail open={open} setOpen={setOpen} record={record} />
      <Edit open={editOpen} setOpen={setEditOpen} record={record} actionRef={actionRef} />
    </>
  );
};

export default Coach;
